import type { FC, CSSProperties } from 'react';
import { useMemo } from 'react';
import chatPic from './chat.svg';
import styles from './styles.module.less';

type ChatLogoProps = {
  size?: number;
  onClick?: () => void;
  className?: string;
}

const ChatLogo: FC<ChatLogoProps> = (props) => {
  const { size = 48, onClick } = props;

  const wrapperStyles = useMemo(() => {
    return {
      width: size,
      height: size,
    } as CSSProperties;
  }, [size]);

  return (
    <div
      onClick={onClick}
      style={wrapperStyles}
      className={props.className}
    >
      <div className={styles.chat_logo}>
        <img src={chatPic} />
      </div>
    </div>
  );
}

export default ChatLogo;